<template>
    <el-card style="max-width: 480px">
        <template #header>
            <div class="header-title">注册</div>
        </template>

        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
                label-width="auto" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model.number="ruleForm.username" placeholder="请输入用户名"/>
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model.number="ruleForm.nickname" placeholder="请输入昵称"/>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPassword">
                    <el-input v-model="ruleForm.checkPassword" type="password" autocomplete="off" placeholder="请确认密码" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        注册
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
    </el-card>
</template>


<script setup>
import router from '@/router/router.js'
import { reactive, ref } from 'vue'
import {createUser} from '../api/userApi.js'
import  messagePost  from '../utils/message.js'

const ruleFormRef = ref()


const ruleForm = reactive({
    username: '',
    nickname: '',
    password: '',
    checkPassword: '',
})

const rules = reactive({
  username: [
    { required: true, message: '用户名必填', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9]{1,18}$/, message: '仅支持英文字符和数字，最多18个字符', trigger: 'blur' }
  ],
  nickname: [
    { required: true, message: '昵称必填', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码必填', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        const hasLetter = /[a-zA-Z]/.test(value);
        const hasDigit = /\d/.test(value);
        if (!hasLetter || !hasDigit) {
          callback(new Error('密码需同时包含字母和数字'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  checkPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== ruleForm.password) {
          callback(new Error('两次密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.value.resetFields()
}
const submitForm = (formEl) => {
  if (!ruleForm.username || !ruleForm.password || !ruleForm.nickname ||  !ruleForm.checkPassword ) {
    messagePost({
        message: "请输入后在提交",
        type: 'error',
    });
    return;
    }
    
    formEl.validate(async (valid) => {
        if (valid) {
            console.log(ruleForm);
            let resp = await createUser(ruleForm)
            console.log(resp);
            if (resp){
              // 回到登录页面
              router.push({path: '/login'})
            }
            else{
              //清空表单
              resetForm(ruleFormRef)
            }
        } else {
          resetForm(ruleFormRef)
        }
    })
}


</script>

<style scoped>

.header-title {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}
</style>